<template>
  <div class="sec-02__content_item-box">
    <div class="num-box">
      <img class="num" :src="numImgs[num - 1]" />
      <div class="slash"></div>
    </div>

    <div class="article-box">
      <h4 class="article-box__h4">{{article.title}}</h4>
      <p class="article-box__p" v-for="item in article.content">{{item}}</p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "mode-content-item",
    props: {
      num: Number,
      article: {
        title: String,
        content: Array
      }
    },
    data() {
      return {
        numImgs: [
          require('../../../assets/img/wx/mode/01.png'),
          require('../../../assets/img/wx/mode/02.png'),
          require('../../../assets/img/wx/mode/03.png'),
          require('../../../assets/img/wx/mode/04.png'),
          require('../../../assets/img/wx/mode/05.png'),
          require('../../../assets/img/wx/mode/06.png')
        ]
      }
    }
  }
</script>

<style scoped lang="scss">
  .num-box {
    position: relative;
    width: 100%;
    height: 108px;
    .num {
      position: absolute;
      top: 0;
      left: 0;
      height: 52px;
    }

    .slash {
      position: absolute;
      left: 42px;
      width:94px;
      height:141px;
      box-sizing:border-box;
      text-indent:5px;
    }

    .slash::before{
      content:"";
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:70px;
      box-sizing:border-box;
      border-bottom:1px solid #0B9773;
      transform-origin:bottom center;
      transform:rotateZ(-60deg) scale(1.9);
    }
  }
  .article-box {
    position: relative;
    left: 84px;
    .article-box__h4 {
      font-size: 35px;
      color: #0B9773;
      margin-bottom: 30px;
    }

    .article-box__p {
      color: #ffffff;
      font-size: 28px;
      line-height: 38px;
    }
  }
</style>
